<div class="container">
  <h1 class="center sp-28" [@enter1]>Angular Animations 有点骚气啊</h1>

  <div class="center" [@enter2]>
    <div class="angular-img-wrapper">
      @switch (animation) {
        <!-- Attention seekers -->
        @case ('bounce') {
          <app-angular-img [@bounce]="animationState" />
        }
        @case ('flash') {
          <app-angular-img [@flash]="animationState" />
        }
        @case ('pulse') {
          <app-angular-img [@pulse]="animationState" />
        }
        @case ('rubberBand') {
          <app-angular-img [@rubberBand]="animationState" />
        }
        @case ('shake') {
          <app-angular-img [@shake]="animationState" />
        }
        @case ('swing') {
          <app-angular-img [@swing]="animationState" />
        }
        @case ('tada') {
          <app-angular-img [@tada]="animationState" />
        }
        @case ('wobble') {
          <app-angular-img [@wobble]="animationState" />
        }
        @case ('jello') {
          <app-angular-img [@jello]="animationState" />
        }
        @case ('heartBeat') {
          <app-angular-img [@heartBeat]="animationState" />
        }
        @case ('headShake') {
          <app-angular-img [@headShake]="animationState" />
        }
        <!-- Bouncing entrances -->
        @case ('bounceIn') {
          <app-angular-img [@bounceIn]="animationState" />
        }
        @case ('bounceInDown') {
          <app-angular-img [@bounceInDown]="animationState" />
        }
        @case ('bounceInLeft') {
          <app-angular-img [@bounceInLeft]="animationState" />
        }
        @case ('bounceInRight') {
          <app-angular-img [@bounceInRight]="animationState" />
        }
        @case ('bounceInUp') {
          <app-angular-img [@bounceInUp]="animationState" />
        }
        <!-- Bouncing exits -->
        @case ('bounceOut') {
          <app-angular-img [@bounceOut]="animationState" />
        }
        @case ('bounceOutDown') {
          <app-angular-img [@bounceOutDown]="animationState" />
        }
        @case ('bounceOutLeft') {
          <app-angular-img [@bounceOutLeft]="animationState" />
        }
        @case ('bounceOutRight') {
          <app-angular-img [@bounceOutRight]="animationState" />
        }
        @case ('bounceOutUp') {
          <app-angular-img [@bounceOutUp]="animationState" />
        }
        <!-- Fading entrances -->
        @case ('fadeIn') {
          <app-angular-img [@fadeIn]="animationState" />
        }
        @case ('fadeInDown') {
          <app-angular-img [@fadeInDown]="animationState" />
        }
        @case ('fadeInDownBig') {
          <app-angular-img [@fadeInDownBig]="animationState" />
        }
        @case ('fadeInLeft') {
          <app-angular-img [@fadeInLeft]="animationState" />
        }
        @case ('fadeInLeftBig') {
          <app-angular-img [@fadeInLeftBig]="animationState" />
        }
        @case ('fadeInRight') {
          <app-angular-img [@fadeInRight]="animationState" />
        }
        @case ('fadeInRightBig') {
          <app-angular-img [@fadeInRightBig]="animationState" />
        }
        @case ('fadeInUp') {
          <app-angular-img [@fadeInUp]="animationState" />
        }
        @case ('fadeInUpBig') {
          <app-angular-img [@fadeInUpBig]="animationState" />
        }
        <!-- Fading exits -->
        @case ('fadeOut') {
          <app-angular-img [@fadeOut]="animationState" />
        }
        @case ('fadeOutDown') {
          <app-angular-img [@fadeOutDown]="animationState" />
        }
        @case ('fadeOutDownBig') {
          <app-angular-img [@fadeOutDownBig]="animationState" />
        }
        @case ('fadeOutLeft') {
          <app-angular-img [@fadeOutLeft]="animationState" />
        }
        @case ('fadeOutLeftBig') {
          <app-angular-img [@fadeOutLeftBig]="animationState" />
        }
        @case ('fadeOutRight') {
          <app-angular-img [@fadeOutRight]="animationState" />
        }
        @case ('fadeOutRightBig') {
          <app-angular-img [@fadeOutRightBig]="animationState" />
        }
        @case ('fadeOutUp') {
          <app-angular-img [@fadeOutUp]="animationState" />
        }
        @case ('fadeOutUpBig') {
          <app-angular-img [@fadeOutUpBig]="animationState" />
        }
        <!-- Flippers -->
        @case ('flip') {
          <app-angular-img [@flip]="animationState" />
        }
        @case ('flipInX') {
          <app-angular-img [@flipInX]="animationState" />
        }
        @case ('flipInY') {
          <app-angular-img [@flipInY]="animationState" />
        }
        @case ('flipOutX') {
          <app-angular-img [@flipOutX]="animationState" />
        }
        @case ('flipOutY') {
          <app-angular-img [@flipOutY]="animationState" />
        }
        <!-- Light speed -->
        @case ('lightSpeedIn') {
          <app-angular-img [@lightSpeedIn]="animationState" />
        }
        @case ('lightSpeedOut') {
          <app-angular-img [@lightSpeedOut]="animationState" />
        }
        <!-- Rotating entrances -->
        @case ('rotateIn') {
          <app-angular-img [@rotateIn]="animationState" />
        }
        @case ('rotateInDownLeft') {
          <app-angular-img [@rotateInDownLeft]="animationState" />
        }
        @case ('rotateInDownRight') {
          <app-angular-img [@rotateInDownRight]="animationState" />
        }
        @case ('rotateInUpLeft') {
          <app-angular-img [@rotateInUpLeft]="animationState" />
        }
        @case ('rotateInUpRight') {
          <app-angular-img [@rotateInUpRight]="animationState" />
        }
        <!--Rotating exits  -->
        @case ('rotateOut') {
          <app-angular-img [@rotateOut]="animationState" />
        }
        @case ('rotateOutDownLeft') {
          <app-angular-img [@rotateOutDownLeft]="animationState" />
        }
        @case ('rotateOutDownRight') {
          <app-angular-img [@rotateOutDownRight]="animationState" />
        }
        @case ('rotateOutUpLeft') {
          <app-angular-img [@rotateOutUpLeft]="animationState" />
        }
        @case ('rotateOutUpRight') {
          <app-angular-img [@rotateOutUpRight]="animationState" />
        }
        <!-- Sliding entrances -->
        @case ('slideInUp') {
          <app-angular-img [@slideInUp]="animationState" />
        }
        @case ('slideInDown') {
          <app-angular-img [@slideInDown]="animationState" />
        }
        @case ('slideInLeft') {
          <app-angular-img [@slideInLeft]="animationState" />
        }
        @case ('slideInRight') {
          <app-angular-img [@slideInRight]="animationState" />
        }
        <!-- Sliding exits -->
        @case ('slideOutUp') {
          <app-angular-img [@slideOutUp]="animationState" />
        }
        @case ('slideOutDown') {
          <app-angular-img [@slideOutDown]="animationState" />
        }
        @case ('slideOutLeft') {
          <app-angular-img [@slideOutLeft]="animationState" />
        }
        @case ('slideOutRight') {
          <app-angular-img [@slideOutRight]="animationState" />
        }
        <!-- Zooming entrances -->
        @case ('zoomIn') {
          <app-angular-img [@zoomIn]="animationState" />
        }
        @case ('zoomInDown') {
          <app-angular-img [@zoomInDown]="animationState" />
        }
        @case ('zoomInLeft') {
          <app-angular-img [@zoomInLeft]="animationState" />
        }
        @case ('zoomInRight') {
          <app-angular-img [@zoomInRight]="animationState" />
        }
        @case ('zoomInUp') {
          <app-angular-img [@zoomInUp]="animationState" />
        }
        <!-- Zooming exits -->
        @case ('zoomOut') {
          <app-angular-img [@zoomOut]="animationState" />
        }
        @case ('zoomOutDown') {
          <app-angular-img [@zoomOutDown]="animationState" />
        }
        @case ('zoomOutLeft') {
          <app-angular-img [@zoomOutLeft]="animationState" />
        }
        @case ('zoomOutRight') {
          <app-angular-img [@zoomOutRight]="animationState" />
        }
        @case ('zoomOutUp') {
          <app-angular-img [@zoomOutUp]="animationState" />
        }
        <!-- Specials -->
        @case ('hinge') {
          <app-angular-img [@hinge]="animationState" />
        }
        @case ('jackInTheBox') {
          <app-angular-img [@jackInTheBox]="animationState" />
        }
        @case ('rollIn') {
          <app-angular-img [@rollIn]="animationState" />
        }
        @case ('rollOut') {
          <app-angular-img [@rollOut]="animationState" />
        }
        <!-- Other -->
        @case ('collapse') {
          <app-angular-img [@collapse]="animationWithState" />
        }
        @case ('collapseHorizontally') {
          <app-angular-img [@collapseHorizontally]="animationWithState" />
        }
        @case ('rotate') {
          <app-angular-img [@rotate]="animationWithState" />
        }
        @case ('rotate90') {
          <app-angular-img [@rotate90]="animationWithState" />
        }
        @case ('rotate720') {
          <app-angular-img [@rotate]="{ value: animationWithState, params: { duration: 700, degrees: 720 } }" />
        }
        @case ('hueRotate') {
          <app-angular-img [@hueRotate]="animationState" />
        }
        @default {
          <div>选择动画</div>
        }
      }
    </div>
  </div>

  <div class="center" [@enter3] (@enter3.done)="animationState = !animationState">
    <nz-select class="m-r-8" nzAllowClear nzPlaceHolder="Choose" nzShowSearch style="width: 200px" [(ngModel)]="animation" (ngModelChange)="animate()">
      @for (option of options; track $index) {
        <nz-option-group [nzLabel]="option.label">
          @for (animation of option.animations; track $index) {
            <nz-option [nzLabel]="animation" [nzValue]="animation"></nz-option>
          }
        </nz-option-group>
      }
    </nz-select>

    <button nz-button nzType="default" [@hueButton]="hueBtnState" (@hueButton.done)="hueBtnState = !hueBtnState" (click)="animate()">点击骚动起来</button>
  </div>

  <div [@enter3]>
    <div class="center">鼠标悬停这个按钮，颜色会渐变</div>
  </div>
</div>
